<template>
	<div style="width: 100%;">


		<el-card style="width:98%;float: left;margin-left: 1%;margin-top: 20px">
            <template #header>
            <div class="card-header">
                <h2>统计结果</h2>
            </div>
            </template>

            <el-row :gutter="20">
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel user-reg suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span id="user_reg_number" style="color:#9933FF"><b style="font-size: 8px;">¥</b>{{ tong.today_chong??0 }}</span>
                                    <div class="content-right">今日充值</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel file suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span id="file_number2" style="color:#FF33CC"><b style="font-size: 8px;">¥</b>{{ tong.yesterday_chong??0 }}</span>
                                    <div class="content-right">昨日充值</div>
                                </div>

                            </div>
                        </div>
                    </el-col>

                    <el-col :sm="12" :lg="3">
                        <div class="small-panel addons suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span id="addons_number" style="color:#00CC00"><b style="font-size: 8px;">¥</b>{{ tong.dayBeforeYesterday_chong??0 }}</span>
                                    <div class="content-right">前日充值</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel user-reg suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span id="user_reg_number" style="color:#CCCC00"><b style="font-size: 8px;">¥</b>{{ tong.month_chong  ?? 0}}</span>
                                    <div class="content-right">本月充值</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel file suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span id="file_number" style="color:#FF9900"><b style="font-size: 8px;">¥</b>{{ tong.lastmonth_chong??0 }}</span>
                                    <div class="content-right">上月充值</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel file suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span id="file_number" style="color:#FF9900"><b style="font-size: 8px;">¥</b>{{ tong.last_lastmonth_chong??0 }}</span>
                                    <div class="content-right">上上月充值</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel users suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span id="users_number" style="color:#009999">{{ tong.user_tong??0 }}</span>
                                    <div class="content-right">充值总用户</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel addons suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span ref="myDiv" id="addons_number" style="color:#996600;" :class="{ 'firstClass': true, 'secondClass': isWidthExceeded }"><b style="font-size: 8px;">¥</b>{{ tong.sum ?? 0 }}</span>
                                    <div class="content-right">充值总金额</div>
                                </div>

                            </div>
                        </div>
                    </el-col>

                </el-row>


        </el-card>



        <el-card style="width: 48.5%;float: left;margin-left: 1%;margin-top: 15px;">
            <template #header>
            <div class="card-header">
                <h2>近7日充值情况</h2>
            </div>
            </template>
            <div id='showorders_sale' style='width:100%; height:300px'></div>
        </el-card>

        <el-card style="width: 48.5%;float: left;margin-left: 1%;margin-top: 15px;">
            <template #header>
            <div class="card-header">
                <h2>月充值统计</h2>
            </div>
            </template>
            <div id='showorders_month' style='width:100%; height:300px'></div>

        </el-card>





	</div>

</template>

<script>

    import scSelectFilter from '@/components/scSelectFilter'
	import * as echarts from 'echarts';
	export default {
		name: 'static_order',
		components: {
            scSelectFilter,
			echarts
		},
		data() {
			return {
				tong:[],
				month_sales:[]
			}
		},
        mounted() {
			 this.getdata()

		},
		methods: {
			echart(v = []){
				    // 基于准备好的dom，初始化echarts实例
				    var chartDom = document.getElementById('showorders_sale');
				    var myChart = echarts.init(chartDom);
				    // 指定图表的配置项和数据
				    var option;
				    option = {
				        tooltip: {
				            trigger: 'axis'
				        },
				        legend: {
				            data: ['订单量', '订单额']
				        },
				        grid: {
				            left: '3%',
				            right: '4%',
				            bottom: '3%',
				            containLabel: true
				        },
				        toolbox: {
				            feature: {
				                saveAsImage: {}
				            }
				        },
				        xAxis: {
				            type: 'category',
				            boundaryGap: false,
				            data: v.date,
				            //设置字体倾斜
				            axisLabel: {
				                interval: 0,
				                rotate: 0,
				                //倾斜度 -90 至 90 默认为0
				                // margin: 9,
				                textStyle: {
				                    color: "#666",
				                    size:"10px"
				                }
				            }
				        },
				        yAxis: {
				            type: 'value'
				        },
				        series: [

				            {
				                name: '订单金额',
				                type: 'line',
				                stack: 'Total',
				                data:v.money
				            }
				        ]
				    };


				    option && myChart.setOption(option);
			},
			echart_month(){
				    // 基于准备好的dom，初始化echarts实例
				    var chartDom = document.getElementById('showorders_month');
				    var myChart = echarts.init(chartDom);
				    // 指定图表的配置项和数据
				    var option;
				    option = {
				        tooltip: {
				            trigger: 'axis'
				        },
				        legend: {
				            data: ['销售额']
				        },
				        xAxis: {
				            type: 'category',
				            data: this.month_sales['month']
				        },
				        yAxis: {
				            type: 'value'
				        },
				        series: [
				            {
				            data: this.month_sales['money'],
				            type: 'bar',
				            name:'销售额'
				            }
				        ]
				    };


				    option && myChart.setOption(option);
			},
			async getdata(){
				var res = await this.$API.system.universal.handle.post({'day':7},'/finance/recharge_statics');
				if(res.code == 200){
					 this.tong = res.data
					 this.month_sales = res.month_sales
					 this.echart(res.latest_day)
					 this.echart_month()

				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},

            refresh(){
                this.$refs.table.reload()
            }
		}

	}
</script>

<style>
.content-left{
    text-align: center;
}
.content-left span{
    font-size: 24px;
    font-weight: bold;
}
.content-right{
    font-size: 14px;
    margin-top: 10px;
}
.card-header h2{
	font-size: 18px;
}
</style>
